<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 3px;
        padding: 2px;
      }
      div {
        width: 300px;
        height: auto;
      }
      p {
        width: 100px;
        height: 100px;
        font-size: 32px;
      }
      span {
        font-size: 16px;
        border: 1px solid black;
      }
      .box1 {
        background: rgb(180, 70, 70);
      }
      .box2 {
        background: rgb(156, 66, 156);
      }
      .box3 {
        background: pink;
      }
      .box4 {
        background: green;
      }
      .box5 {
        background: blue;
      }
      .box6 {
        background: rgb(84, 184, 167);
      }
    </style>
  </head>
  <body>
    <script>
      //封装选择函数
      function $(ele) {
        return document.querySelector(ele);
      }
      function $all(ele) {
        return document.querySelectorAll(ele);
      }

      function Mycard(classname, num) {
        this.classname = classname;
        this.num = num;
        this.page = 1;
      } //内置根据num创建多少个图标的功能以及切换页面
      //加入下一页(点击图片本身或者下一页按钮 都能去下一页）/轮播功能
      Mycard.prototype.create = function () {
        //用箭头函数就有this指向问题 箭头函数没有this 指向的是上一层 如果都没有this 就指向window
        var divele = document.createElement("div");
        divele.className += `${this.classname}`;
        document.body.appendChild(divele);
        for (i = 0; i < this.num; i++) {
          divele.innerHTML += `<button>按 钮 ${i + 1} </button>`;
        }
        divele.innerHTML += `<p class="box1">1</p>`;
      };
      Mycard.prototype.changepage = function () {
        var ele = $(`.${this.classname} p`);
        var btns = $all(`.${this.classname} button`);
        //写function函数this就会指向调用函数的本身，箭头函数没有this 会向上找 所以最外层用function 里面用箭头函数 让this一直指向obj
        Array.from(btns).forEach((item, i) => {
          item.onclick = () => {
            ele.className = `box${i + 1}`;
            this.page = i + 1;
            ele.innerText = `${this.page}`;
          };
        });
      };
      Mycard.prototype.nextpage = function () {
        $(
          `.${this.classname}`
        ).innerHTML += `<input type="button" class="nextpage" value="下一页"></input>`;
        var ele = $(`.${this.classname} p`); //和create一样 重新构建渲染了页面 绑定关系会刷新 所以需要在其他函数之前调用
        $(".nextpage").onclick = () => {
          this.page++;
          if (this.page == this.num + 1) {
            this.page = 1;
          }
          ele.className = `box${this.page}`;
          ele.innerText = `${this.page}`;
        };
        ele.onclick = () => {
          this.page++;
          if (this.page == this.num + 1) {
            this.page = 1;
          }
          ele.className = `box${this.page}`;
          ele.innerText = `${this.page}`;
        };
      };
      Mycard.prototype.lunbo = function () {
        var ele = $(`.${this.classname} p`);
        setInterval(() => {
          this.page++;
          if (this.page == this.num + 1) {
            this.page = 1;
          }
          ele.className = `box${this.page}`;
          ele.innerText = `${this.page}`;
        }, 3000);
      };
      var obj1 = new Mycard("contain1", 3);
      obj1.create();
      obj1.nextpage();
      obj1.changepage();
      obj1.lunbo();
      var obj2 = new Mycard("contain2", 6);
      obj2.create();
      obj2.nextpage();
      obj2.changepage();
      obj2.lunbo();
    </script>
  </body>
</html>
